<template>
	<div class="page">
		<Head navTitle="赛事资讯"/>
		<div class="page-container ">
			<div class="bs-panel ht-panel">
				<div class="bs-panel-body" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
					<el-row :gutter="20">
						<el-col :xs="24" :md="8" :lg="6" v-for="item in list" :key="item">
							<div class="news-box" @click="golink()">
								<div class="news-pic" :style="{'background-image': 'url('+item.pic+')'}"></div>
								<div class="news-grid">
									<div class="new-sm-title">FIFA 沙滩足球世界杯俄罗斯 2021™</div>
									<div class="new-title">随着差距缩小，RFU 占主导地位</div>
									<div class="new-time">2021-08-30</div>
								</div>
							</div>
						</el-col>
					</el-row>
					<div class="load-more" v-if="loading"><i class="el-icon-loading"></i> 加载中...</div>
					<div class="load-more" v-if="noMore">没有更多了</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				list: [{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},
					{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},
					{
						title: '随着差距缩小，RFU 占主导地位',
						pic: require('../../assets/images/news1.png'),
					},
					{
						title: '免费赠送金币，你来就送噢！',
						pic: require('../../assets/images/news2.png'),
					},
				],
				count: 4,
				loading: false,
			};
		},
		computed: {
			noMore() {
				return this.count >= 20
			},
			disabled() {
				return this.loading || this.noMore
			}
		},
		mounted() {},
		methods: {
			golink(){
				this.$router.push('/newsDetail');
			},
			load() {
				this.loading = true
				setTimeout(() => {
					for (let i = 0; i < 10; i++) {
						this.list.push(this.list.length + 1);
					}
					this.loading = false
				}, 1000)
			},
		}
	}
</script>
